<template>


    <div class="message">
        <div @click="showmsg" class="note"
            :style="{ backgroundColor: item.background, top: item.top, left: item.left, transform: `rotate(${item.rotate})` }"
            v-for="item in messagr_list" :key="item._id">
            <div class="pushpin" :style="{ backgroundColor: item.btn_color }">
            </div>
            <p :style="{ color: item.font_color, fontSize: '1vw' }">{{ item.title }}</p>
        </div>
        <div style="transform: translateX(-50%);z-index: 999; display: flex;position: sticky;color:green;top:60vh;left:50vw;width: 30%;
            justify-content: center;
            ">
            <div class="msg">
                <div class="title">留言</div>
                <div class="choice">
                    <div class="bg">
                        <span>背景颜色</span>
                        <pick-colors v-model:value="obj.background" />
                    </div>
                    <div class="pushpin">
                        <span>按钮颜色</span>
                        <pick-colors v-model:value="obj.btn_color" />
                    </div>
                    <div class="font_color">
                        <span>文字颜色</span>
                        <pick-colors v-model:value="obj.font_color" />
                    </div>
                </div>
                <div class="content">
                    <el-input :rows="4" type="textarea" maxlength="100" show-word-limit placeholder="留言吧......."
                        v-model="obj.title" clearable @change=""></el-input>
                    <el-button type="primary" size="default" @click="submit">发布</el-button>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import PickColors from 'vue-pick-colors'
import { type Message } from "@/types/WebEssay"
import { add_message, get_messages } from "@/apis/web/WebApi"
import { ElMessage } from "element-plus";
const messagr_list = ref<any>([])
onMounted(() => {
    getData()
})
const getData = async () => {
    const result = await get_messages()
    messagr_list.value = result.data
}
const obj = reactive<Message>({
    title: "",
    background: "#F3F0A8",
    btn_color: "#E81111",
    font_color: "#291F1F",
    top: '',
    left: '',
    rotate: '',
})
function getRandomInt(min: number, max: number) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generateRandomString(length: any) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    const charactersLength = characters.length;
    for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}
const showmsg = () => {
}

const submit = async () => {
    obj.left = getRandomInt(0, 90).toString() + 'vw'
    obj.top = getRandomInt(0, 90).toString() + 'vh'
    obj.rotate = getRandomInt(-20, 20).toString() + 'deg'
    messagr_list.value.push({ ...obj, _id: generateRandomString(5) })

    const result: any = await add_message(obj)
    obj.title = ''
    if (result.code === 200) {
        ElMessage({
            type: "info",
            message: "添加成功"
        })
    }
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    width: 5px;
    height: 8px;

}

.message {
    width: 100vw;
    height: 90vh;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;

    .note:hover {
        transform: translateY(-10%) !important;
    }

    .note {
        position: absolute;
        transition: all 1s;
        width: 15vw;
        padding: 1vw;
        background-color: #ffffcc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        border: 1px solid #ddd;
        border-radius: 5px;


        .pushpin {
            width: 1vw;
            height: 1vw;
            border-radius: 30px;
            box-shadow: 0 0 5px #000;
        }
    }

    .note p {
        margin: 0;
        font-family: Arial, sans-serif;
        font-size: 14px;
        line-height: 1.5;
    }

    .msg {
        background-color: #ffffcc;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 0 30px #eee;


        .title {
            padding: 0.5vw;
            text-align: center;
            font-weight: bold;
            font-size: 1.5vw;
            color: #000
        }

        .choice {
            font-size: 1vw;
            display: flex;
            justify-content: space-evenly;

            .bg,
            .font_color,
            .pushpin {
                display: flex;
                align-items: center;
            }



        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;

            // :deep(.el-input__wrapper) {
            //     font-size: 5vw;
            // }


            .el-button {
                font-size: 1vw;
                font-weight: bold;
            }
        }
    }
}
</style>